<template>
  <div v-resize="onResize">
    <div class="ana-detail-title">
      <a-icon type="forward" />病例报告空间分布
    </div>
    <div style="width: 100%; height: 300px" ref="chart"></div>
  </div>
</template>

<script>
import { ChartUtils } from "@/utils/chart";
import AttrSelect from "../utils/AttrSelect.vue";
import { isString } from "@/utils/utils";

const chartUtils = new ChartUtils();

export default {
  components: { AttrSelect },
  data() {
    return {
      key: "报告地区",
      // step: 1 * 24 * 3600,
      tableData: [],
    };
  },
  props: {
    chartData: Array,
  },
  watch: {
    key: function (v, o) {
      this.resetOpt();
    },
    chartData: function (v, o) {
      this.resetOpt();
    },
  },
  methods: {
    async init() {
      chartUtils.dom = this.$refs.chart;
      chartUtils.init();
      await chartUtils.registerMap("Hubei", 420000);
      let option = this.getOption();
      chartUtils.setOption(option);
    },
    filterFunc(k, v) {
      return isString(v);
    },
    getOption() {
      let data = this.reproject().map(v => {
        return {
          name: v['label'],
          value: v['value']
        }
      });
      // console.log(data)
      // let data = [
      //   {
      //     name: "仙桃市",
      //     value: 20,
      //   },
      //   {
      //     name: "宜昌市",
      //     value: 10,
      //   },
      //   {
      //     name: "武汉市",
      //     value: 10,
      //   },
      // ];
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["发病人数"],
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        visualMap: {
          left: "right",
          min: 0,
          max: 30,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          // text: ['High', 'Low'],           // 文本，默认为数值文本
          calculable: true,
        },
        series: [
          {
            name: "人数",
            type: "map",
            map: "Hubei",
            data: data,
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            // markLine: {
            //   data: [{ type: "average", name: "平均值" }],
            // },
          },
          // {
          //   name: "人数",
          //   type: "map",
          //   map: "bmap",
          //   data: [],
          //   label: {
          //     show: true,
          //   },

          //   // markLine: {
          //   //   data: [{ type: "average", name: "平均值" }],
          //   // },
          // },
        ],
       
      };
      return option;
    },
    reproject() {
      let data = this.chartData.map((v) => v[this.key]);

      data = data.reduce(function (time, name) {
        if (name in time) {
          time[name]++;
        } else {
          time[name] = 1;
        }
        return time;
      }, {});

      let reproject = [];
      // let tableData = [];
      Object.keys(data).forEach((k) => {
        reproject.push({
          label: k === "undefined" ? "未填写" : k,
          value: data[k],
          rr: (data[k] / this.chartData.length).toFixed(4),
        });
      });
      this.tableData = reproject;
      return reproject;
    },

    resetOpt() {
      let option = this.getOption();
      // console.log(option);
      chartUtils.setOption(option);
    },

    onResize() {
      chartUtils.onResize();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>